<!--
 * @Author: chenyi
 * @Date: 2020-03-25 15:24
 * @LastEditors:
 * @LastEditTime:
 * @description: 商品详情拼团模块
 -->
<template>
  <view>
    <view v-if="groupInfo.secondLeft > 0 || !groupInfo.headVOList" class="group">
      <view class="head">
        <view class="info">
          <view class="b">{{ groupInfo.groupPeopleNum }}人在拼单，可直接参与</view>
          <view v-if="groupInfo.secondLeft > 0" class="small">距离结束仅剩
            <time-count v-if="groupInfo.secondLeft" style="margin-left: 5px" :time="groupInfo.secondLeft" @timeEnd="activityEnd"></time-count>
          </view>
          <view v-else class="small">距离结束仅剩 00:00:00</view>
        </view>
        <view class="more" @click="showMore">
          查看更多
          <image class="img" src="/static/images/icon/icon_arror_right.png" />
        </view>
      </view>

      <view v-if="groupInfo.headVOList" class="list" style="border-top: 1px solid #eaeaea">
        <view v-for="(item, index) in shortArr" :key="index" class="li">
          <view class="binfo">
            <view class="user">
              <image class="img" :src="item.headPic" alt="" />
              <view class="span">{{ item.headName }}</view>
            </view>
            <view class="info">
              <view class="small">还差<view class="i">{{ item.diffPeopleNum }}人</view>拼成</view>
              <view class="span">剩余
                <time-count v-if="item.secondLeft" style="margin-left: 5px" :time="item.secondLeft" @timeEnd="countEnd"></time-count>
              </view>
            </view>
          </view>
          <view class="btn" @click="toGroupOrderCheck({group_id: item.groupId})">去拼单</view>
        </view>
      </view>

      <base-popup type="center" :show="ShowGroupList" :show-close="false" @close="closePopup">
        <view v-if="ShowGroupList" class="groupList">
          <view>
            <view class="moreList">
              <view class="h4">正在拼单</view>
              <scroll-view class="list" scroll-y="true">
                <view v-for="(item, index) in groupList" :key="index" class="li">
                  <view class="binfo more">
                    <image class="img" :src="item.headPic" alt="" />
                    <view class="info2">
                      <view class="small">{{ item.headName }}</view>
                      <view class="span">剩余 <time-count v-if="item.secondLeft" style="margin-left: 2px" :time="item.secondLeft" @timeEnd="listCountEnd"></time-count></view>
                    </view>
                  </view>
                  <view class="right">
                    <view class="span"> 还差<view class="b">{{ item.diffPeopleNum }}</view>人</view>
                    <view class="btn" @click="toGroupOrderCheck({group_id: item.groupId})">去拼单</view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="close" @click="ShowGroupList=false"><image class="img" src="/static/images/commodity/close_ico.png"></image></view>

        </view>
      </base-popup>

      <!--参与别人的团-->
      <view v-if="GroupIdInfo.groupBuyingSponsorId" class="otherGroup">
        <view class="otherGroupCon">
          <view class="div">
            <image class="img" :src="groupInfo.headPic" alt="" />
            <view class="small">
              <view class="name">{{ groupInfo.headName }}</view> 发起的拼团
            </view>
          </view>
          <view class="span" @click="shareGroup({group_id: groupInfo.groupId, share: '1'})">马上参团</view>
        </view>
      </view>
    </view>
    <confirm-popup ref="groupWaitRemain" @shareClick="shareClick" />
  </view>
</template>

<script>
import basePopup from '@/components/base/base-popup'
import TimeCount from '@/components/count-down/bySecond'
import confirmPopup from '@/components/confirmPopup/index'
import { mapGetters } from 'vuex'
export default {
  components: {
    TimeCount,
    basePopup,
    confirmPopup
  },
  props: {
    allData: {
      type: Object,
      required: true,
      default: null
    },
    groupDetail: {
      type: Object,
      default: null
    },
    querys: {
      type: Object,
      default: null
    },
    fromType: {
      type: Number,
      default: null
    },
    idInfo: {
      type: Object,
      default: null
    }
  },
  inject: ['initShare'],
  data() {
    return {
      ShowGroupList: false,
      availableGroupBuy: false,
      ifMove: false,
      hasGetList: false,
      baseInfo: {},
      groupList: [],
      GroupIdInfo: {},
      shortList: [],
      groupInfo: {},
      showDialogStyle: false,
      toGroupHide: false,
      shortArr: null,
      query: {
        pageNo: 1,
        pageSize: 20
      }
    }
  },
  computed: {
    ...mapGetters(['userToken', 'user'])
  },
  watch: {
    userToken() {
      this.initGroupList()
    }
  },
  async created() {
    // 判断是不是拼团, 然后获取拼团信息
    const ifGroupBuy = this.allData.group_buying_id
    if (ifGroupBuy !== null) {
      this.getGroupIdInfo(this.allData.group_buying_id)
    } else {
      this.getGroupIdInfo()
    }
    if (ifGroupBuy !== null) {
      await this.initGroupList()
    }
    this.getGroupIdInfo(this.allData.group_buying_id)
  },
  onLoad() {
  },
  onShow() {

  },
  mounted() {
    setTimeout(this.waitMention, 500)
  },
  methods: {
    // 拼团未完成提示
    waitMention() {
      if (this.groupInfo.inviteBtn) {
        this.$refs.groupWaitRemain.show({
          title: '温馨提示',
          content: '您有一个未拼成的商品，邀请好友拼单才能大大提高拼成率哦~',
          authBtn: true,
          authBtnTxt: '去邀请好友',
          yesTxt: '',
          openType: 'share'
        })
      }
    },
    // 传递一些详情页需要修改的数据
    sendChange() {
      const GroupData = {}
      let available = false
      if (this.groupInfo !== null) {
        if (this.groupInfo.secondLeft > 0) {
          available = true
        } else {
          available = false
        }
      } else {
        available = false
      }
      GroupData.module_name = 'groupBuy'
      GroupData.data = {
        groupInfo: this.groupInfo,
        idInfo: this.GroupIdInfo,
        availableGroupBuy: available
      }
      this.$emit('rootChange', GroupData)
    },

    // 获取可能的拼单信息
    getGroupIdInfo(val) {
      let groupBuyingId = ''
      if (this.querys.group_buying_id) {
        groupBuyingId = this.querys.group_buying_id
      } else if (val * 1 >= 0) {
        groupBuyingId = val
      }
      this.GroupIdInfo.groupBuyingId = groupBuyingId
      this.GroupIdInfo.groupBuyingSponsorId = this.querys.group_id
    },

    closePopup() {
      this.$set(this, 'pShow', false)
    },

    // 拼团活动详情
    initGroupList() {
      const groupBuyId = this.GroupIdInfo.groupBuyingId // 团购的活动id
      const groupId = this.GroupIdInfo.groupBuyingSponsorId // 团id
      // 参与别人的拼团
      if (groupId && groupBuyId) {
        this.$api.promoteApi.getHeadGroupBuyDetail({
          groupBuyingId: groupBuyId,
          groupId: groupId,
          userId: this.user.uid
        }).then(res => {
          this.groupInfo = res.data
          this.selfGroup = res.data.isMember
          this.selfGroupResult = res.data.isMember

          if (res.data.headVOList) {
            this.shortArr = res.data.headVOList.slice(0, 2)
          }
          this.$forceUpdate(this.selfGroup)
          if (res.data !== null) {
            if (res.data.secondLeft > 0) {
              this.availableGroupBuy = true
            } else {
              this.availableGroupBuy = false
            }
            // this.buyCountAry.max = res.data.groupLimit
          } else {
            this.availableGroupBuy = false
          }
          this.sendChange()
        })
      }
      // 拼团详情
      if (groupBuyId && !groupId) {
        let param = { groupBuyingId: groupBuyId }
        if (this.userToken) {
          param = {
            groupBuyingId: groupBuyId,
            userId: this.user.uid
          }
        }
        this.$api.promoteApi.getGroupBuyBase(param).then(res => {
          this.groupInfo = res.data
          if (res.data !== null) {
            if (res.data.secondLeft > 0) {
              this.availableGroupBuy = true
            } else {
              this.availableGroupBuy = false
            }
            if (res.data.headVOList) {
              this.shortArr = res.data.headVOList.slice(0, 2)
            }
          }
          this.sendChange()
        })
      }
    },

    //  获取拼团团长信息
    async initGroupHead() {
      if (!this.hasGetList) {
        this.hasGetList = true
        // this.$vux.loading.show({
        //   text: '正在获取..'
        // })
      }
      this.$api.promoteApi.getGroupPages({ groupBuyingId: this.GroupIdInfo.groupBuyingId, userId: this.user.uid }).then(res => {
        this.groupList = res.data
        // this.$vux.loading.hide()
      }).catch(e => {
        // this.$vux.loading.hide()
      })
    },

    //  查看更多
    showMore() {
      if (this.groupList.length <= 0) {
        this.initGroupHead().then(() => {
          this.ShowGroupList = true
        })
      } else {
        this.ShowGroupList = true
      }
    },
    // 参与分享的团
    shareGroup(val) {
      if (this.groupInfo.isMember) {
        uni.showToast({
          title: '您已经参加过该团,不可重复参加',
          icon: 'none',
          duration: 2 * 1000
        })
        return
      }
      const param = {
        type: 'shareGroup', // 页面已经存在的团
        data: val
      }
      this.$emit('takeInGroup', param)
    },

    //  参与别人的拼团
    toGroupOrderCheck(val) {
      this.ShowGroupList = false
      const param = {
        type: 'groupInPages', // 分享出来的团
        data: val
      }
      this.$emit('takeInGroup', param)
    },

    // 活动结束
    activityEnd() {
      this.$emit('goodsRefresh')
    },

    // 计时结束
    countEnd() {
      this.$emit('GroupRefresh')
    },
    listCountEnd() {
      this.initGroupHead()
    },
    shareClick() {
      this.initShare(true)
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .groupList {
    .weui-mask {
      display: none!important;
    }
    .close {
      width: 60rpx;
      height: 60rpx;
      margin: 20px auto;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .group {
    background-color: #fff;
    border-radius: 10px;
    padding: 20rpx 20rpx 0 20rpx;
    margin-bottom: 20rpx;

    .head {
      display: flex;
      justify-content: space-between;
      padding-bottom: 12rpx;
      .info {
        display: grid;
        .b {
          font-size: 28rpx;
          color: #000;
          line-height: 40rpx;
        }
        .small {
          display: flex;
          font-size: 24rpx;
          color: #ff3939;
          line-height: 36rpx;
        }
      }
      .more {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #999;
        line-height: 40rpx;
        .img { width: 10rpx; height: 18rpx; margin-left: 10rpx }
      }
    }

    .list {
      .li {
        align-items: center;
        padding: 20rpx 0;
        display: flex;
        border-top: 1px solid #eaeaea;
        width: 100%;
        overflow: hidden;
        &:first-child {
          border-top: none;
        }
        .right {
          width: 140rpx;
          .b {
            color: #ff3939;
            font-weight: normal;
          }
        }
        .binfo {
          flex: 1;
          display: flex;
          justify-content: space-between;
          text-align: right;
          &.more {
            justify-content: end;
            width: 460rpx;
          }

          /*div {*/
            .user {
              display: flex;
              align-items: center;
              width: 350rpx;
              .span  {
                text-align: left;
                width: 270rpx;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }

              .img {
                width: 70rpx;
                height: 70rpx;
                border-radius: 50%;
                margin-right: 15rpx;
              }
            }
            .img {
              width: 70rpx;
              height: 70rpx;
              border-radius: 50%;
              margin-right: 10rpx;
            }

            .info {
              display: grid;
              margin-right: 10rpx;
              width: 200rpx;
              .small {
                display: flex;
                text-align: center;
                font-size: 28rpx;
                line-height: 40rpx;
                .span {
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
                .b {
                  width: 140rpx;
                  font-weight: normal;
                  color: #666;
                }
                .i {
                  font-style: normal;
                  color: #ff3939;
                }
              }
              .span {
                display: flex;
                color: #666;
                line-height: 40rpx;
                white-space: nowrap;
              }
            }

            .info2 {
              display: grid;
              width: 380rpx;
              .small {
                display: block;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-size: 28rpx;
                line-height: 40rpx;
                text-align: left;
                .b {
                  width: 140rpx;
                  font-weight: normal;
                  color: #666;
                }
                .i {
                  font-style: normal;
                  color: #ff3939;
                }
              }
              .span {
                display: flex;
                color: #666;
                line-height: 40rpx;
              }
            }
          /*}*/
        }
        .btn {
          width: 140rpx;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 28rpx;
          background-color: $color-theme;
          color: #fff;
          text-align: center;
        }
      }
    }

    .moreList {
      width: 600rpx;
      height: 680rpx;
      margin: 0 auto;
      padding: 20rpx;
      border-radius: 30rpx;
      background: #fff;

      .list {
        height: 500rpx;
        overflow-y: auto;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;

        .right {
          .span {
            display: flex;
            justify-content: center;
          }
        }
        .info {
          justify-content: start;
          text-align: left;
          .small {
            display: flex;
            .span {
              margin-right: 10rpx;
              color: #000;
            }
          }
        }
      }
      .h4 {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        line-height: 100rpx;
        text-align: center;
      }
    }

    .otherGroup {
      width: 100%;
      height: 80rpx;
      position: fixed;
      left: 0;
      bottom: 120rpx;
      z-index: 40;
      box-sizing: border-box;
      .otherGroupCon {
        background-color: #FDF5B9;
        display: flex;
        padding: 0 20rpx;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        box-sizing: border-box;
        margin-top: calc( 0rpx - constant(safe-area-inset-bottom));
        margin-top: calc( 0rpx - env(safe-area-inset-bottom));
      }

      .small {
        height: 55rpx;
        line-height: 55rpx;
        font-size: 26rpx;
        width: 550rpx;
        padding-left: 20rpx;
        display: flex;
        box-sizing: border-box;
        .name {
          max-width: 330rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .span {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        border-radius: 25rpx;
        background-color: #EA4539;
        color: #fff;
        font-size: 26rpx;
        text-align: center;
        margin-left: 15rpx;
      }
      .div {
        display: flex;
        width: 550rpx;
        align-items: center;
        .img {
          width: 55rpx;
          height: 55rpx;
          border-radius: 50%;
        }
      }

    }
  }
</style>
